﻿@using FrogFoot.Resources
@model List<FrogFoot.Entities.Location>
@{
    ViewBag.Title = "Coverage";
}

<!-- Element for ftth-embed.min.js to check to add the zone's dates-->
<div id="useZoneInfoClick"></div>

<div class="row">
    <div class="col-xs-5" style="margin-top: 30px;">
        <h2>Coverage</h2>
    </div>
</div>

<div class="row">
    <div class="col-xs-5">
        <div class="form-group">
            <select id="LocationId" name="LocationId" class="form-control">
                <option value="">Select a Suburb</option>
                @foreach (var item in Model)
                {
                <option value="@item.LocationId" data-code="@item.PrecinctCode">@item.Name</option>
                }
            </select>

            <div class="form-group" style="display: none;">
                <select class="form-control" id="pac-select">
                    <option value="">Select Suburb</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <input id="pac-input" class="form-control" type="text" placeholder="Enter Street Address" tabindex="2">
        </div>
    </div>
    <div class="col-xs-5">
        <div id="zoneInfoContainer" style="display: none;">
            <label>Name: </label><span id="zoneInfoName"></span><br />
            <label>Status: </label><span id="zoneInfoStatus"></span><br />
            <label>First Date To Fibre: </label><span id="zoneInfoFDOF"></span><br />
            <label>Last Date To Fibre: </label><span id="zoneInfoLDOF"></span>
        </div>
    </div>
</div>

<div class="row form-group">
    <div class="col-xs-12 text-center">
        <div class="form-group" id="map-results"></div>
    </div>
</div>

<!-- Map -->
<div class="col-sm-12">
    <div id="map-canvas" style="width: 100%; height: 900px;"></div>
</div>

@section scripts
{
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=@(Globals.GoogleApiKey)&libraries=places"></script>
    <script src="~/Scripts/map/ftth-embed.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#LocationId').change(function () {
                var code = $('option:selected', this).data('code');
                var optionIndex = $('#pac-select option').filter(function () {
                    return $(this).data('id') == code;
                }).val();

                $('#pac-select').val(optionIndex).change();
            });
        })
    </script>
}